<template>
  <div class="sidebar-settings">
    <!--  频段设置 -->
    <div class="titleSetting">
      <span class="title-span">频段设置</span>
      <img style="width:100%;height:35px;" src="./u246.svg">
    </div>
    <div class="form-content">
      <scatterSetting v-if="scanStore.analyseType" />
      <freBandSetting v-else />
    </div>
    <!--  谱线设置 -->
    <div class="titleSetting">
      <span class="title-span">谱线设置</span>
      <img style="width:100%;height:35px;" src="./u246.svg">
    </div>
    <div class="form-content">
      <spectralLineSetting />
    </div>
    <!--   任务参数 -->
    <div class="titleSetting">
      <span class="title-span">任务参数</span>
      <img style="width:100%;height:35px;" src="./u246.svg">
    </div>
    <div class="form-content">
      <taskParams ref="tpRef" />
    </div>

    <el-button class="ctl-btn mr-4" style="margin: 50px 50px 0 50px;" @click="emit('start', tpRef.form)">
      <x-icon
        class="mr-3"
        icon="start"
        source="cus"
        color="#80ffff"
        size="16"
      />  
      启动
    </el-button>
    <el-button
      class="ctl-btn close"
      style="margin: 50px 50px 0 50px;"
      @click="emit('stop', tpRef.form)"
    >
      <x-icon
        class="mr-3"
        icon="scanstop"
        source="cus"
        size="16"
      />  
      停止
    </el-button>
  </div>
</template>

<script setup>
  import freBandSetting from './FreBandSetting.vue'
  import scatterSetting from './ScatterSetting.vue'
  import spectralLineSetting from './SpectralLineSetting.vue'
  import taskParams from './TaskParams.vue'
  import useScanStore from '@/store/modules/scanMonitor';
  const scanStore = useScanStore()
  const tpRef = ref(null)
  const emit = defineEmits(['start', 'stop'])
</script> 
<style scoped>
.titleSetting{
  width: 95%;
  height: 25px;
  margin: 0% 2% 0% 2%;
}
.title-span{
  color:var(--scan-text-color);
  position: relative;
  top: 22px;
  left: 2%;
}
.form-content{
  width: 100%;
  margin: 50px 0 0 10px;
}
</style> 